<template>
  <div class="goods">
    <el-card>
      <!-- 1. 搜索区域 -->
      <div class="header">
        <el-input @change="searchInp1" v-model="input" placeholder="用户名搜索" icon="el-icon-search"><el-button slot="append" icon="el-icon-search"></el-button></el-input>
        <el-input @change="searchInp2" v-model="input" placeholder="邮箱搜索" icon="el-icon-search"><el-button slot="append" icon="el-icon-search"></el-button></el-input>
        <el-input @change="searchInp3" v-model="input" placeholder="电话号码搜索" icon="el-icon-search"><el-button slot="append" icon="el-icon-search"></el-button></el-input>
        <el-button type="primary" @click="addGoods">添加</el-button>
      </div>
      <!-- 2. 表格区域展示视图数据 -->
      <div class="wrapper">
        <el-table :data="tableData" border stripe highlight-current-row>
          <el-table-column prop="id" label="用户ID" width="100"> </el-table-column>
          <el-table-column prop="username" label="用户名" width="100" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="password" label="密码" width="100"> </el-table-column>
          <el-table-column prop="head_img" label="头像" width="120">
            <template slot-scope="scope">
              <img :src="scope.row.head_img" alt="" />
            </template>
          </el-table-column>
          <!-- <el-table-column label="状态">
            <template v-slot="scope">
              {{ scope.row.mg_state }}
              <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="userStatuChanged(scope.row)"> </el-switch>
            </template>
          </el-table-column> -->
          <el-table-column prop="email" label="邮箱" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="phone" label="电话号码" show-overflow-tooltip> </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <el-button type="info" size="mini" @click="handleFind(scope.$index, scope.row)" icon="el-icon-search"> 查看</el-button>
              <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit"> 编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="text-align: center; margin: 20px">
          <el-pagination @size-change="handleSizeChange" background layout="total, prev,sizes, pager, next, jumper" :current-page.sync="currentNo" :page-sizes="[4, 6, 10, 15]" @current-change="currentPage" :page-size="pageCount" :total="totalPage"> </el-pagination>
        </div>
      </div>
    </el-card>
    <add-user ref="AddUser"></add-user>
    <edit-user ref="EditUser" :rowData="rowData"></edit-user>
    <find-user ref="FindUser" :rowData="rowData"></find-user>
  </div>
</template>

<script>
import findUser from './Findsuser.vue'
import AddUser from './Adduser.vue'
import EditUser from './Edituser.vue'
export default {
  name: 'FirstProjectIndex',

  data() {
    return {
      input: '',
      tableData: [], //当前页码表格数据
      pageNo: 1, //表格页码
      pageCount: 4, //数据数
      currentNo: 1, //当前页码
      allData: [], //全部数据
      totalPage: 1,
      type: 1,
      list: [],
      rowData: {} //当前行的对象
    }
  },

  methods: {
    // async userStatuChanged(userInfo) {
    //   console.log(userInfo.mg_state)
    // },
    handleFind(index, row) {
      this.$refs.FindUser.dialogVisible = true
      this.$refs.FindUser.UserForm = row
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.$refs.EditUser.editDialogVisible = true
      this.$refs.EditUser.UserForm = row
    },
    async handleDelete(id) {
      const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      const { data: res } = await this.$http.post('/user/delete', { id })
      if (res.code != 0) {
        return this.$message.error('删除失败')
      }
      this.$message.success('删除成功')
      this.getData()
      this.getPageTotal()
    },
    addGoods() {
      this.$refs.AddUser.dialogVisible = true
    },
    // 每页条数
    handleSizeChange(val) {
      this.pageCount = val
      this.currentNo = 1
      this.getData()
      console.log(`每页 ${val} 条`)
    },
    //获取前4条数据
    getData(index) {
      this.pageNo = index || this.pageNo
      this.$http
        .post('/user/page', { page: this.pageNo, pageSize: this.pageCount })
        .then(res => {
          console.log(res)
          this.tableData = res.data.data
        })
        .catch(error => {
          console.log(error)
        })
    },
    //当前页数据
    currentPage(currentPage) {
      this.currentNo = currentPage
      console.log(this.currentNo)
      // this.getData(this.currentNo)
      if (this.type == 1) {
        this.getData(this.currentNo)
      } else {
        this.tableData = this.list.slice((this.currentN - 1) * 3, this.currentN * 3)
      }
    },
    //获取总页数
    async getPageTotal() {
      const { data: res } = await this.$http.get('user')
      console.log(res)
      // this.tableData = res.data
      this.totalPage = res.total
    },
    // 搜索
    async searchInp1(val) {
      const { data: res } = await this.$http.get('/user/search1', { params: { search: val } })
      console.log(res)
      this.currentNo = 1
      if (res.code === 0) {
        this.list = res.data
        this.tableData = []
        this.pageCount = 3
        this.tableData = res.data.slice(0, 3)
        this.totalPage = res.total
        this.type = 2
      } else {
        this.tableData = []
        this.totalPage = 1
        this.pageCount = 1
        this.type = 1
      }
    },
    // 搜索
    async searchInp2(val) {
      const { data: res } = await this.$http.get('/user/search2', { params: { search: val } })
      console.log(res)
      this.currentNo = 1
      if (res.code === 0) {
        this.list = res.data
        this.tableData = []
        this.pageCount = 3
        this.tableData = res.data.slice(0, 3)
        this.totalPage = res.total
        this.type = 2
      } else {
        this.tableData = []
        this.totalPage = 1
        this.pageCount = 1
        this.type = 1
      }
    },
    // 搜索
    async searchInp3(val) {
      const { data: res } = await this.$http.get('/user/search3', { params: { search: val } })
      console.log(res)
      this.currentNo = 1
      if (res.code === 0) {
        this.list = res.data
        this.tableData = []
        this.pageCount = 3
        this.tableData = res.data.slice(0, 3)
        this.totalPage = res.total
        this.type = 2
      } else {
        this.tableData = []
        this.totalPage = 1
        this.pageCount = 1
        this.type = 1
      }
    }
  },
  mounted() {
    this.getData()
    this.getPageTotal()
  },
  created() {
    // this.getGoodsList()
  },
  components: {
    AddUser,
    EditUser,
    findUser
  }
}
</script>

<style lang="scss" scoped>
.goods {
  .header {
    display: flex;
    justify-content: space-between;
    .el-input {
      width: 30%;
    }
  }
  .wrapper {
    margin: 20px 0;
  }
  img {
    width: 60px;
    height: 60px;
  }
  ::v-deep .cell {
    text-align: center;
  }
}
</style>
